<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例3</title>
    <script>
        // 代码 1 扩展运算符能拆开数组变为序列 
        console.log([1, 2, 3, 4, 5]) // Array(5) [1, 2, 3, 4, 5] 
        console.log(1, 2, 3, 4, 5) // 1 2 3 4 5 
        // 与 console.log(1,2,3,4,5)等价 
        console.log(...[1, 2, 3, 4, 5]) // 1 2 3 4 5 

        // 代码 2 扩展运算符常用于将数组转为函数的参数序列 
        let arr = [];
        let args = [1, 2, 3];
        // 不使用扩展运算符，只能自己将数组拆分成单个元素或使用 apply 方法 
        // 1. arr.push(args[0], args[1], args[2]); 
        // 2. Array.push.apply(arr, args); 
        arr.push(...args); // 等价于 arr.push(1,2,3) 
        console.log(arr); // Array(3) [1, 2, 3] 

        // 代码 3 扩展运算符可以将拆开的序列插入数组中间 
        console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5 
        // 所以扩展运算符常用于合并数组 
        let arr1 = [1, 2];
        let arr2 = [3, 4];
        // 等价于 arr1.concat(arr2) 
        let all = [...arr1, ...arr2];
        console.log(all); // Array(4) [1, 2, 3, 4] 

        //可以作用于表达式的结果 
        console.log(...(1 > 0 ? [1, 2, 3] : [4, 5, 6])); // 1 2 3 
        //空数组，不产生效果
        console.log([...[], 1]); //[1] 

        //代码 4 rest 参数是扩展运算符的逆运算，作用是组装剩余参数为新数组 
        function restFunc(array, ...items) {
            console.log(items);
        }
        restFunc(1, 2, 3, 4) // Array(3) [2, 3, 4] 
        // 剩余运算符也是扩展运算符的逆运算，作用是组装剩余元素为新数组 
        let [x, y, ...z] = arr;
        console.log(x, y, z); // 1 2 [3, 4, 5] 
    </script>
</head>

<body></body>

</html>